<template>
	<view>
		<image class="background" mode="aspectFill" src="@/static/images/bg.png"></image>
		<image class="logo" mode="aspectFill" src="@/static/images/logo.png"></image>
		<swiper
			vertical
			class="content"
			:current="current"
			previous-margin="272rpx"
			next-margin="128rpx"
			@change="handleChange"
		>
			<template v-if="activityList.length > 0">
				<swiper-item class="item" :class="{ active: current == index }" v-for="(item, index) in activityList" :key="index">
					<view class="item-box" @click.native.stop="goDetail(item.id)">
						<template>
							<image class="image" mode="aspectFill" :src="item.imageUrl"></image>
							<image class="type-button" v-if="item.type == 1" mode="aspectFill" src="../static/images/gyjz.png"></image>
							<image class="type-button" v-if="item.type == 0" mode="aspectFill" src="../static/images/xxhd.png"></image>
							<view class="item-content">
								<view class="item-box-title">
									{{item.title}}
								</view>
								<view class="item-box-content">
									{{item.content}} 
								</view>
								<view class="item-button-box">
									<image class="box-button"  @click.native.stop="goSign(item)" v-if="item.type == 0" mode="aspectFill" src="../static/images/wycj.png"></image>
									<image class="box-button"  @click.native.stop="goChuandi(item.id) "v-if="item.type == 0" mode="aspectFill" src="../static/images/wyfx.png"></image>
									<image class="box-button" @click.native.stop="goSign(item)" v-if="item.type == 1" mode="aspectFill" src="../static/images/wylq.png"></image>
									<image class="box-button"  @click.native.stop="goChuandi(item.id) "v-if="item.type == 1" mode="aspectFill" src="../static/images/wycd.png"></image>
								</view>
							</view>
						</template>
					</view>
				</swiper-item>
			</template>
			<template v-if="activityList.length == 0">
				<swiper-item class="item active">
					<view class="item-box" >
						<template>
							<image class="image" mode="aspectFill" src="@/static/images/itemBg.png"></image>
							<view class="box-color">暂无活动，敬请期待~</view>
						</template>
					</view>
				</swiper-item>
			</template>
		</swiper>
		<view v-if="signFlag"  @click.native.stop="signFlag=false" style="position: absolute; width: 100%; height: 100%;background-color: #00000088;top: 0;left: 0; z-index: 100;">
			<view class="sign-form" @click.native.stop :style="{bottom:bottom}">
				<view class="close-button" @click.native.stop="signFlag=false">X</view>
				<view class="form-title flex" style="align-items: center;">
					<view style="background-color: #E70012; width: 8rpx; height: 34rpx;"></view>
					<view style="font-weight: 700;font-size: 40rpx;color: #E70012;line-height: 40rpx;margin-left: 4rpx;">报名登记</view>
				</view>
				<view class="form-content">
					<view class="form-item">
						<view class="item-label">姓名</view>
						<input class="item-input" @input="onChange()" v-model="signForm.name" placeholder="请输入您的姓名" placeholder-style="font-weight: 400;font-size: 28rpx;color: #979797;height: 88rpx;line-height: 88rpx;"></input>
					</view>
					<view class="form-item">
						<view class="item-label">电话</view>
						<input class="item-input" type="number" @input="onChange()" v-model="signForm.phone" placeholder="请输入您的联系电话" placeholder-style="font-weight: 400;font-size: 28rpx;color: #979797;height: 88rpx;line-height: 88rpx;"></input>
					</view>
					<view class="form-item">
						<view class="item-label">年龄</view>
						<input class="item-input" type="number" @input="onChange()" :adjust-position="false" 
						@focus="inputBindFocus" @blur="inputBindBlur" v-model="signForm.age" placeholder="请输入您的年龄" 
						placeholder-style="font-weight: 400;font-size: 28rpx;color: #979797;height: 88rpx;line-height: 88rpx;"></input>
					</view>
					<view class="form-item">
						<view class="item-label">地点</view>
						<view class="flex">
							<image mode="aspectFill" style="width: 40rpx;height: 40rpx;" src="/static/images/map.png"></image>
							<view style="display: flex;" v-if="signForm.addressId == 0">
								<view class="place-item" @click="show = true">{{signForm.type == 0? "请查看地点":"请选择领取地点"}}</view>
								<view class="place-item trans">▲</view>
							</view>
							<view style="display: flex;" v-if="signForm.addressId > 0">
								<view class="place-item" @click="show = true">{{signForm.address}}</view>
								<view class="place-item trans">▲</view>
							</view>
						</view>
					</view>
					<view class="form-item" >
						<button class="item-button" :class="{ colormo: !submitFlag}" @click="sumitSign()">确认提交</button>
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="bottom" border-radius="20" :close = "close">
			<scroll-view class="address-list" :scroll-into-view="toView" scroll-y="true" scroll-with-animation="true">
				<view class="address-item" v-if="addressList.length>0" v-for="(item,index) in addressList" @click="chooseItem(item)">
					<view class="item-top">
						<image class="address-icon" mode="aspectFill" src="/static/images/map.png"></image>
						<view>
							<view class="address-info">{{item.name}}</view>
							<view class="address-tips">{{item.address}}</view>
						</view>
					</view>
					<view class="item-bottom">
						<view class="address-tips">点击选择该地点</view>
						<button class="address-button" @click="goDaohang(item)">去导航</button>
					</view>
				</view>
				<view v-if="addressList.length==0" class="no-address">
					<view>该活动地点暂时未确定，请等待！</view>
				</view>
			</scroll-view>
		</u-popup>
	</view>
</template>

<script setup>
 import { getToken } from '../utils/auth';
import { getCodeImg, register,getInfo } from '@/api/login'
import { getActivityList,getActivityAddress,sign } from '@/api/system/pubulic'
import { toast} from '@/utils/common'
import storage from '@/utils/storage'
import constant from '@/utils/constant'


  export default {
    data() {
      return {
		toView:"",
		current:0,
        captchaEnabled: true,
		signFlag: false,
		type:0,
        globalConfig: getApp().globalData.config,
        registerForm: {
          username: "",
          password: "",
          confirmPassword: "",
          code: "",
          uuid: ""
        },
		addressList:[],
		params:{
			pageNum:1,
			pageSize:10
		},
		submitFlag:false,
		total:0,
		activityList:[],
		signForm:{
			type:0,
			activityId:0,
			name:"",
			phone:"",
			age:null,
			limitAgeMin:50,
			limitAgeMax:0,
			addressId:0,
			address:""
		},
		user:{
			userId : storage.get(constant.id),
			name : storage.get(constant.name),
			avatar : storage.get(constant.avatar),
			info : uni.getStorageSync("user_info")
		},
		show:false,
		bottom:0
      }
    },
	onLoad(event){
		if(event.u){
		  const currentTime = Date.now(); // 当前时间戳（毫秒）
		  const expireTime = currentTime + 3600 * 1000; // 计算过期时间
		  storage.set("ysUserId",{
			value: event.u,
			expireTime: expireTime
		  })
		}
		this.getActivityList();
		if(getToken()){
			this.$store.dispatch('GetInfo')
		}
	},
	onShareAppMessage() {
		return {
			title: "济南中科+",
			path:'pages/index'+(this.user.userId?'?u='+this.user.userId:'')
		}
	},
	onShareTimeline() {
		return {
			title: "济南中科+",
			path:'pages/index'+(this.user.userId?'?u='+this.user.userId:'')
		}
	},
    methods: {
		getActivityAddress(id){
			getActivityAddress({id:id}).then((res)=>{
				this.addressList = res.data
			})
		},
		goDaohang(item){
			console.log(item)
			uni.openLocation({
				latitude: parseFloat(item.lat),
				longitude: parseFloat(item.lng),
				name: item.name,
				address: item.address,
				success: function () {
					console.log('success');
				}
			});
		},
		chooseItem(item){
			this.show = false
			this.signForm.addressId = item.id;
			this.signForm.address = item.name;
			//赋值
		},
		open() {
			// 弹出层内容自动在最底部
			// this.toView = this.list[this.list.length-1]
			// 弹出层内容自动在最顶部
			this.toView = this.list[0]
		},
		close() {
			this.show = false
			// console.log('close');
		},
		inputValueChange() {},
		inputBindFocus(e) {
			this.bottom = e.detail.height;
		},
		inputBindBlur() {
			this.bottom = 0;
		},
		sumitSign(){
			if(this.submitFlag){
				if(this.signForm.phone.length != 11){
					toast("请检查手机号是否正确");
					return;
				}
				if(this.signForm.limitAgeMin!=0 && this.signForm.age<this.signForm.limitAgeMin){
					toast("小于"+this.signForm.limitAgeMin+"岁不可领取");
					return;
				}
				
				if(this.signForm.limitAgeMax!=0 && this.signForm.age>this.signForm.limitAgeMax){
					toast("大于"+this.signForm.limitAgeMax+"岁不可领取");
					return;
				}
				//提交
				if(this.signForm.type == 1 && this.signForm.addressId == 0){
					toast("请选择领取地点");
					return;
				}
				//提交
				if(this.signForm.type == 0 && this.signForm.addressId == 0){
					toast("请先查看地点");
					return;
				}
				uni.showLoading()
				sign(this.signForm).then(()=>{
					uni.hideLoading();
					toast("报名成功，请等待客服人员审核");
					setTimeout(()=>{
						this.signFlag = false;
					},1500)
				})

			}
		},
		onChange(){
			if(this.signForm.name != "" && this.signForm.phone != "" && this.signForm.age != "" && this.signForm.age != null){
				this.submitFlag = true
			}else{
				this.submitFlag = false
			}
		},
		getActivityList(){
			getActivityList(this.params).then((res)=>{
				this.activityList = res.data.rows
				this.total = res.data.total
			})
		},
      // 用户登录
      handleChange(option) {
		console.log(option);
		this.current = option.detail.current;
      },
	  goSign(item){
		  if(!getToken()){
			  uni.navigateTo({
			  	url:"/pages/login"
			  })
			  return
		  }
		  let yqUserId = this.getValue();
		  console.log(this.user.info)
		  this.signForm = {
			type:item.type,
			activityId:item.id,
			name:this.user.info.name,
			phone:this.user.info.phone,
			age:this.user.info.age,
			limitAgeMin:item.limitAgeMin,
			limitAgeMax:item.limitAgeMax,
			addressId:0,
			address:"",
			yqUserId:yqUserId
		  };
		  this.getActivityAddress(item.id);
		  this.signFlag = true;	
		  this.onChange();
		},
		getValue(){
			const res = storage.get("yqUserId");
			if (res) {
				if(res.expireTime > Date.now()){
					return res.value;
				}else{
					uni.removeStorage({
						key: "yqUserId",
						success: function () {
						console.log('缓存已过期，已移除');
						}
					});
				} // 缓存未过期，返回值
			} 
			return null; // 缓存过期，返回 null
		},
	  goDetail(id){
		uni.navigateTo({
			url:"/pages/detail/index?id="+id
		})
	  },
	  goChuandi(id){
		  if(!getToken()){
			  uni.navigateTo({
				url:"/pages/login"
			  })
			  return
		  }
		uni.navigateTo({
			url:"/pages/detail/chuandi?id="+id
		})
	  }
    }
  }
</script>

<style lang="scss" scoped>
	.address-list{
		padding: 20rpx;
		max-height: 600rpx;
		min-height: 280rpx;
		overflow-y: auto;
		.no-address{
			display: flex;
			align-items: center;
			justify-content: center;
			height: 280rpx;
			font-size: 32rpx;
			color: #333333;
		}
		.address-item{
			border: 2rpx solid #BDBDBD;
			border-radius: 20rpx;
			padding: 10rpx 40rpx;
			margin-bottom: 20rpx;
			.item-top{
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #BDBDBD;
				padding: 30rpx 0;
				.address-icon{
					width: 30rpx;
					height: 30rpx;
					margin-right: 20rpx;
				}
				.address-info{
					color: #333333;
					font-size: 26rpx;
					font-weight: 600;
					letter-spacing: 2rpx;
				}
				.address-tips{
					color: #7b7979;
					font-size: 24rpx;
					letter-spacing: 3rpx;
				}
			}
			.item-bottom{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-top: 10rpx;
				.address-tips{
					color: #BDBDBD;
					font-size: 24rpx;
					letter-spacing: 3rpx;
				}
				.address-button{
					background-color: #E7654E;
					border-radius: 20rpx;
					width: 120rpx;
					//height: 30rpx;
					font-size: 20rpx;
					color: #FFFFFF;
					padding: 5rpx 20rpx;
					letter-spacing: 1rpx;
					margin: 0;
					
				}
			}
		}
	}
	.sign-form{
		background-image: url(@/static/images/signBg.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: fixed;
		bottom: 0;
		left: 0;
		height: 1048rpx;
		width: 750rpx;
		z-index: 1000;
		.close-button{
			width: 60rpx;
			height: 60rpx;
			position: absolute;
			right: 30rpx;
			top: 30rpx;
			font-size: 30rpx;
			font-weight: 700;
			text-align: center;
			line-height: 60rpx;
		}
		.form-title{
			position: absolute;
			top: 100rpx;
			left: 30rpx;
		}
		.form-content{
			position: absolute;
			top: 136rpx;
			left: 0;
			padding: 52rpx 62rpx;
			.form-item{
				margin-bottom: 30rpx;
				.item-label{
					font-weight: 600;
					font-size: 32rpx;
					color: #333333;
					margin-bottom: 20rpx;
				}
				.item-input{
					background: #FFFFFF;
					border-radius: 45rpx;
					padding: 0rpx 40rpx;
					width: 546rpx;
					height: 88rpx;
					line-height: 88rpx;
					box-sizing:content-box;
				}
				.item-button{
					border-radius: 45rpx;
					color: #FFFFFF;
					font-size: 32rpx;
					text-align: center;
					height: 72rpx;
					width: 626rpx;
					background-color: #E7654E;
					line-height: 72rpx;
					letter-spacing: 4rpx;
					margin-top: 50rpx;
				}
				.colormo{
					background-color: #BDBDBD;
				}
				.place-item{
					color: #3181E8;
					font-weight: 400;
					height: 40rpx;
					line-height: 40rpx;
					margin-left: 5rpx;
					letter-spacing: 1rpx;
					font-size: 32rpx;
				}
				.trans{
					transform: rotate(180deg);
					font-size: 26rpx;
				}
			}
		}
	}
.background {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 928rpx;
}
.logo{
	position: fixed;
	top: 108rpx;
	left: 30rpx;
	width: 236rpx;
	height: 96rpx;
}
.content {
	position: relative;
	width: 100%;
	height: 100vh;
	z-index: 2;
	.item {
		padding-block: 30rpx;
		padding-inline: 30rpx;
		position: relative;
		box-sizing: border-box;
		max-height: 1086rpx;
		&.active .item-box{
			&::before {
				opacity: 0;
				z-index: 888;
			}
		}
	}
	.item-box{
		width: 690rpx;
		height: 100%;
		max-height: 1026rpx;
		border-radius: 50rpx;
		position: relative;
		&::before {
			content: "";
			position: absolute;
			border-radius: 50rpx;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			max-height: 1026rpx;
			opacity: 1;
			z-index: 1111;
			background: rgba(#fff, 0.5);
			transition: all 0.5s ease-in-out;
		}
	}
	.image {
		width: 690rpx;
		height: 100%;
		max-height: 1026rpx;
		border-radius: 50rpx;
		
	}
	.box-color{
		font-weight: 400;
		font-size: 40rpx;
		color: #FFFFFF;
		position: absolute;
		left: 156rpx;
		top: 388rpx;
	}
	.type-button{
		width: 180rpx;
		height: 60rpx;
		position: absolute;
		left: 30rpx;
		top: 30rpx;
	}
	.item-content{
		position: absolute;
		left: 0rpx;
		bottom: 22rpx;
		.item-box-title{
			font-weight: 700;
			font-size: 40rpx;
			color: #FFFFFF;
			padding: 0 20rpx;
			overflow: hidden;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
		}
		.item-box-content{
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			margin-top: 14rpx;
			padding: 0 20rpx; 
			overflow: hidden;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
		}
		.item-button-box{
			margin-top: 34rpx;
			.box-button{
				width: 690rpx;
				height: 98rpx;
				z-index: 988;
			}
		}
	}
	
}
</style>
